<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>商城详情页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="{{asset('Home/css/iconfont/iconfont.css')}}" rel="stylesheet"/>
    <link href="{{asset('Home/css/common.css')}}" rel="stylesheet"/>
    <link href="{{asset('Home/css/goods-detail.css')}}" rel="stylesheet"/>
    <link type="text/css" href="{{asset('css/base.css')}}" rel="stylesheet" />
    <script src="{{asset('Home/js/jquery.js')}}"></script>
    <style>
       /* .color .size a{ color:#555; text-decoration:none;}
        .color .size a:hover{ color:#c00; text-decoration:underline;}
 

        .colors .sizes li{ list-style:none;}

        .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
        */</style>
</head>
<body>
	    <!-- 顶部信息栏 -->
	    @include('Home/Layout/topper')
	    
	    <!-- 搜索栏 -->
	    @include('Home/Layout/search')
        <div class="shop-nav-box">
            <div class="shop-nav wrapper">
                <ul class="nav-ul">
            <li><a style="color:white"  href="{{asset('/')}}">首页</a></li>
            
                    {{-- $m用于控制遍历分类的个数 --}}
                    @php $m = 1; @endphp  
                    
                    @foreach($goodsort as $v)
                    
                        @if ($v['pid'] == 0 && $m <= 6) 

                            <li><a style="color:white"href="{{asset('goodslist?sortid='.$v['id'])}}">{{$v['sname']}}</a></li>

                        @endif

                    @php $m++; @endphp
                    @endforeach

        </ul>
            </div>
        </div>
    <!--头部-->

    <div class="wrapper">
        <div class="detail-top clearfix">
            <div class="detail-goods">
                <div class="detail-show">
                    <div class="origin-show">
                        <div class="zoomup"></div>
                        <img class="big-pic" src="{{asset($onedata->goods->pic)}}" alt="{{$onedata->goods->gname}}" />
                    </div>
                    <div class="thumb-show">
                        @foreach($onedata->goods_pic as $v )
                            <span class="item"><img class="s-pic" src="{{$v->path}}" bsrc="{{$v->path}}" /></span>
                        @endforeach
                    </div>
                    <div class="zoom-show">
                        <img src="" alt="" />
                    </div>
                </div>
                <div class="detail-info">
                <input type="hidden"  class="pid">
                    <div class="item-title">{{$onedata->goods->gname}}</div>
                    <div class="item-price">
                        <span class="now sys_item_price">￥{{$onedata->goods->price}}</span><span class="dft sys_item_mktprice">￥{{$onedata->goods->price}}</span>
                    </div>
                    <ul class="item-data clearfix">
                        <li class="col-4">销量<span class="txt-theme ml10">{{$onedata->goods->sales}}件</span></li>
                        <li class="col-4">浏览量<span class="txt-theme ml10">{{$onedata->goods->click}}个</span></li>
                    </ul>
                       <div class="sku-info sys_item_spec">
                        <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="1">
                                <dt style="margin-left:-20px;padding-right:20px">颜色：</dt>
                                <dd>
                                    <ul class="sys_spec_text">
                                         @foreach($color as $v)
                                            <li data-aid="{{$v}}"><a href="javascript:;">
                                                {{$v}}
                                             </a></li>
                                         @endforeach
                                    </ul>

                                </dd>
                            </dl>
                            <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="2">
                                <dt style="margin-left:-20px;padding-right:20px">尺码：</dt>
                                <dd>
                                    <ul class="sys_spec_text">
                                        @foreach($size as $v)
                                                <li data-aid="{{$v}}" size="{{$v}}"><a href="javascript:;">{{$v}}</a></li>
                                        @endforeach
                                    </ul>
                                </dd>
                            </dl>
                                @foreach($onedata->goods_price as $v)
                                    <input type="hidden" allsize="{{$v->size}}" allcolor="{{$v->color}}" name="{{$v->id}}"class ="color_size">
                                @endforeach


                        
                          <div class="prop">
                            <div class="dt">数量：</div>
                            <div class="dd">
                                <div class="mod-numbox chose-num" data-max="30">
                                    <span class="count-minus"></span>
                                    <input class="count-input" value="1"  type="text" name="num" />
                                    <span class="count-plus"></span>
                                </div>
                                <span>（限购30件）</span>
                                <div class="stock ">
                                    (库存<span class="storage">888</span>件)
                               </div>
                            </div>
                        </div>
                        </div> 
                        
                    <div class="item-action">
                        <a href="" onClick="buy_now()" class="buy-now">立即购买</a>
                        <a href="" onClick="add_cart()" class="add-cart">加入购物车</a>
                    </div>
                    
                   
                    <div class="item-extend">
                        <a href="{{url('/like', $onedata->goods->id)}}" class="fav"><i class="iconfont icon-star"></i>收藏</a>
                    </div>
                </div>
            </div>
           <div class="detail-shop">
                <ul class="detail-rec clearfix">
                    @foreach ($detailHotSale as $v)
                    <li>
                        <a href="{{asset('goods-detail/'.$v['gid'])}}" class="figure"><img src="{{$v['path']}}" alt="" /></a>
                    </li>
                    @endforeach
        </ul>
            </div>
        </div>
        <!-- 商品推荐 -->
        <div class="ui-tabs">
            <span class="item active">特惠促销</span>
        </div>
        <ul class="detail-rec clearfix">
            @foreach ($loadHotSale as $v)
            <li>
                <a href="{{asset('goods-detail/'.$v['gid'])}}" class="figure"><img src="{{$v['path']}}" alt="" /></a>
                <div class="name"><a href="{{asset('goods-detail/'.$v['gid'])}}">{{$v['gname']}}</a></div>
                <div class="price">￥{{$v['sale_price']}}</div>
            </li>
            @endforeach
        </ul>
        <!-- 商品推荐 -->

        <div class="detail-bottom clearfix">
             <div class="detail-main">
                <div class="detail-tabs">
                    <a class="item" href="javascript:;">产品图片</a>
                    <a class="item" href="javascript:;">规格参数</a>
                    
                </div>
              
                 <div class="tab-con">
                    <div class="mod-type-cont">
                        @foreach($onedata->goods_pic as $v )
                        <img src="{{$v->path}}" alt="" />
                        @endforeach
                    </div>
                </div>
                <div class="tab-con">
                    <div class="detail-stand">
                        <div class="tit">主体规格参数</div>
                        <div class="attr">
                            <div class="value">{!! $onedata->descr !!}</div>
                        </div>
                    
                    </div>
                </div>
           
               
            </div>
            <div class="detail-aside">
                <div class="detail-aside-box mb15">
                    <div class="big-tit">商品分类</div>
                    <div class="detail-menu">
                        <div class="item">
                        @foreach($goodsort as $v)
                            <div class="type" data-action="shopd-type"><span class="iconfont"></span><a href="{{asset('goodslist?sortid='.$v['id'])}}">{{$v['sname']}}</a></div>
                            <ul class="c-type">
                            @foreach($v['secondort'] as $m)
                                <li><a href="{{asset('goodslist?sortid='.$m['id'])}}">{{$m['sname']}}</a></li>
                            @endforeach
                            </ul>
                        @endforeach
                        </div>
                       
                    </div>
                </div>

                <div class="detail-aside-box">
                    <div class="big-tit">店铺热销</div>
                    <ul class="detail-hot">
                    @foreach ($shopHotSale as $v)
                        <li>
                            <a href="{{asset('goods-detail/'.$v['gid'])}}" class="figure"><img src="{{$v['path']}}" alt="" /></a>
                            <div class="name"><a href="">{{$v['gname']}}</a></div>
                            <div class="price">
                                <span class="now">¥{{$v['sale_price']}}</span><!-- <span class="origin">¥298.00</span> -->
                            </div>
                        </li>
                     @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--脚部-->
    <div class="fatfooter">

    </div>
    <!--脚部-->
</body>

<link rel="stylesheet" href="{{asset('Home/js/slick/slick.css')}}"/>
<script src="{{asset('Home/js/slick/slick.min.js')}}"></script>
<script src="{{asset('Home/js/global.js')}}"></script>

<script>
        //输出显示对应商品的价格
        var obj ='{!! $onedata->relation !!}' ;
        var sts=eval("("+obj+")");
        var sys_item={                            
            "sys_attrprice":sts};
        //商品规格选择
        $(function(){
            $(".sys_item_spec .sys_item_specpara").each(function(){
                var i=$(this);
                var p=i.find("ul>li");
                // console.log(p);
                p.click(function(){
                    if(!!$(this).hasClass("selected")){
                        $(this).removeClass("selected");
                        i.removeAttr("data-attrval");

                    }else{
                        $(this).addClass("selected").siblings("li").removeClass("selected");
                        i.attr("data-attrval",$(this).attr("data-aid"));
                    }
                    getattrprice(); //输出价格
                })
            })
         //获取对应属性的价格
        function getattrprice(){
            var defaultstats=true;
            var _val='';
            var _resp={
                mktprice:".sys_item_mktprice",
                price:".sys_item_price",
                storage:".storage",
                pid:'.pid'
            }  //输出对应的class
            $(".sys_item_spec .sys_item_specpara").each(function(){
                var i=$(this);
                var v=i.attr("data-attrval");
                if(!v){
                    defaultstats=false;
                }else{
                    _val+=_val!=""?"_":"";
                    _val+=v;
                    // console.log(_val);

                }
            })
            if(!!defaultstats){

                _mktprice=sys_item['sys_attrprice'][_val]['mktprice'];
                _price=sys_item['sys_attrprice'][_val]['price'];
                _storage=sys_item['sys_attrprice'][_val]['storage'];
                _pid=sys_item['sys_attrprice'][_val]['id'];
                // console.log(_pid);

            }else{
                _mktprice=sys_item['mktprice'];
                _price=sys_item['price'];
                 _storage=sys_item['storage'];
                 _pid=sys_item['id'];

            }
            //输出价格
            $(_resp.mktprice).text(_mktprice);  ///其中的math.round为截取小数点位数
            $(_resp.price).text(_price);
            $(_resp.storage).text(_storage);
            $(_resp.pid).attr("value", _pid);
           
 
        }
    })

</script>
 <script>
            //立即购买和添加购物车
            function buy_now(){
               var color = $(".selected").first().attr('data-aid');
               var size = $(".selected").last().attr('size');
               	if (color ==undefined){
                    alert('请选择颜色');
                    return;
                } 
                if (size ==undefined){
                    alert('请选择尺寸');
                    return;
                } 
               var num = $('.count-input').val();  
               var pid = $(".pid").val();
               $(".buy-now").attr("href", "/dobuy/{{$onedata->goods->id}}/"+pid+"/"+num+"" )        
            }



            function add_cart(){
                var color = $(".selected").first().attr('data-aid');
               
                var size = $(".selected").last().attr('size');
                if (color ==undefined){
                    alert('请选择颜色');
                    return;
                } 
                if (size ==undefined){
                    alert('请选择尺寸');
                    return;
                } 
                var num = $('.count-input').val();
                var pid = $(".pid").val();
                $(".add-cart").attr("href", "/addcart/{{$onedata->goods->id}}/"+pid+"/"+num+"" );    
            }
</script>
<script>

    /*商品数量操作*/
    function goodsCount(o){
            if(!(o instanceof Object)) var o={};
            var inputCell = o.inputCell || ".count-input",
                minusCell = o.minusCell || ".count-minus",
                plusCell = o.plusCell || ".count-plus",
                disClass = o.disClass || "disabled";
            return this.each(function(){
                var $wrap = $(this),
                    $input = $(inputCell,$wrap),
                    $minus = $(minusCell,$wrap),
                    $plus = $(plusCell,$wrap),
                    maxnum=parseInt($wrap.attr('data-max')) || false,
                    minnum=$wrap.attr('data-min') || 1,
                    initnum=$input.val() || minnum;
                /*初始*/
                $input.val(initnum);
                checkIlegal();
                function checkIlegal(){
                    var value =parseInt($input.val());

                    //
                     if (maxnum&&value>maxnum) {
                        $input.val(maxnum);
                    }
                    else if (value<minnum) {
                        $input.val(minnum);
                    }
                    if(value<=minnum){
                        $minus.addClass(disClass);
                    }else{
                        $minus.removeClass(disClass);
                    }
                    if (value>=maxnum) {
                        $plus.addClass(disClass);
                    }else {
                        $plus.removeClass(disClass);
                    }

                }
                function checknull() {
                    var value =$input.val();
                    if(value === "" || value === "0"){
                        $input.val(minnum);
                    }
                }
                $input.keyup(function(evt){
                    var value = $(this).val();
                    var newvalue = value.replace(/[^\d]/g,"");
                    $(this).val(newvalue);
                    checknull();
                });
                $input.blur(function(){
                    checknull();
                    checkIlegal();
                })

                $minus.click(function(){
                    minus();
                     checkIlegal();
                });

                $plus.click(function(){
                    add();
                    checkIlegal();
                });

                function add () {
                    var value = $input.val();
                    var plus = parseInt(value)+1;
                    $input.val(plus);
                }
                function minus () {
                    var value = parseInt($input.val());
                    var minus = value-1;
                    $input.val(minus);
                }
            });
        }
        $.fn.goodsCount = goodsCount;
</script>

<script >
    $(function () {

        +function () {
            var index=0,
            bsrc='',
            timer=null,
            box=$('.detail-show'),
            origin=$('.origin-show'),
            bigimg=box.find('.big-pic'),
            tumb=box.find('.thumb-show'),
            tumbItem=tumb.find('.item'),
            zoomup=box.find('.zoomup'),
            zoomshow=box.find('.zoom-show');

            /*图片切换*/
            tumbItem.on('mouseenter',function () {
                index=$(this).index();
                clearTimeout(timer);
                timer=setTimeout(function (){
                    update(index);
                }, 300)

            });

            function update (index) {
                bsrc=tumbItem.eq(index).find('.s-pic').attr('bsrc');
                bigimg.attr('src', bsrc);
                tumbItem.find('.s-pic').removeClass('active').end().eq(index).find('.s-pic').addClass('active');
            }

            update(index);

            if ($('.detail-show .thumb-show .item').length>5) {
                $('.detail-show .thumb-show').slick({
                    slidesToShow: 5,
                    infinite:false
                });
            }

            /*放大镜*/
            origin.on('mouseover mouseout',function (e) {
                if (e.type=="mouseover") {
                    var oX=$(this).offset().left,
                    oY=$(this).offset().top,
                    zX=e.pageX,
                    zY=e.pageY,
                    pW=$(this).outerWidth(),
                    pH=$(this).outerHeight(),
                    zW=zoomup.outerWidth(),
                    zH=zoomup.outerHeight(),
                    scale=pW/zW,
                    zsW=zoomshow.width()*scale,//放大后的宽度
                    factor=zsW/pW

                    zoomshow.find('img').attr('src',bigimg.attr('src')).width(zsW);

                    $(document).on('mousemove.zoom',function (e) {
                        zX=e.pageX-oX- zW/2;
                        zY=e.pageY-oY- zH/2;
                        move();
                    });

                    function move () {
                        zX=zX<=0?0:zX;
                        zX=zX>=pW-zW?pW-zW:zX;
                        zY=zY<=0?0:zY;
                        zY=zY>=pH-zH?pH-zH:zY;
                        zoomup.show().css({top:zY,left:zX});
                        zoomshow.show().find('img').css({top:-zY*factor,left:-zX*factor});
                    }
                }
                else {
                    $(document).off('mousemove.zoom');
                     zoomup.hide()
                     zoomshow.hide();
                }
            });
        }();

        $('.mod-numbox').goodsCount(); //数量加减

        $('.detail-main').zTab({
            tabnav:'.detail-tabs',
            trigger:'click'
        });
    });


    
</script>
</html>
